forum

Home / DeveloperSection / Forums / How do you use filters in AngularJS to manipulate data?

Ask Question
Revati S Misra

Revati S Misra

Follow
Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies. I love to learn new things in life that keep me motivated.

Can you answer this question?

Answer

1 Answers

Aryan Kumar

Aryan Kumar

22-Nov-2023

In AngularJS, filters are used to format or manipulate data in the view. They can be applied to expressions in the HTML to transform the data before it's displayed. Filters are often used for tasks such as formatting dates, sorting arrays, converting text to uppercase or lowercase, and more.

Here's how you can use filters in AngularJS:

Basic Syntax:

{{ expression | filter:argument1:argument2:... }}
  • expression: The data you want to filter.
  • filter: The name of the filter to apply.
  • arguments: Optional arguments that can be passed to the filter.

Examples:

  1. Uppercase Filter:
<!-- Converts text to uppercase -->
<p>{{ 'hello' | uppercase }}</p> <!-- Output: HELLO -->
  1. Lowercase Filter:
<!-- Converts text to lowercase -->
<p>{{ 'WORLD' | lowercase }}</p> <!-- Output: world -->
  1. Number Filter:
<!-- Formats a number with specified decimal places -->
<p>{{ 12345.6789 | number:2 }}</p> <!-- Output: 12,345.68 -->
  1. Date Filter:
<!-- Formats a date -->
<p>{{ today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

In the controller:

// Assuming 'today' is a Date object
$scope.today = new Date();

 

  1. Filtering Arrays:
<!-- Filters an array based on a specified criteria -->
<ul>
  <li ng-repeat="item in items | filter:'searchText'">{{ item.name }}</li>
</ul>

$scope.items = [
  { name: 'Apple', searchText: 'fruit' },
  { name: 'Carrot', searchText: 'vegetable' },
  // ...
];

Custom Filters:

You can also create custom filters by registering a new filter function using the filter method in your AngularJS module.

// Example of a custom filter named 'reverse'
angular.module('myApp').filter('reverse', function() {
  return function(input) {
    return input.split('').reverse().join('');
  };
});

<!-- Using the custom 'reverse' filter -->
<p>{{ 'hello' | reverse }}</p> <!-- Output: olleh -->

Chaining Filters:

Filters can be chained to perform multiple transformations on the data.

<p>{{ price | currency | uppercase }}</p>

In this example, the currency filter formats the price, and then the uppercase filter converts it to uppercase.

Common Use Cases:

Formatting Numbers and Currencies:

  • Use number and currency filters to format numeric values.

Date Formatting:

  • The date filter is useful for formatting date objects into human-readable strings.

Text Transformations:

  • uppercase and lowercase filters can be used to change the case of text.

Filtering and Sorting Lists:

  • The filter and orderBy filters are helpful for filtering and sorting arrays or lists.

Custom Transformations:

  • Create custom filters for specific data transformations that are not covered by built-in filters.

By leveraging filters in AngularJS, you can easily manipulate and format data in a clean and declarative manner, enhancing the presentation of your application's user interface.

MindStick Training

Liked By